<template>
	<view>
		<canvas type="2d" id="canvas" style="width: 375px; height: 258px"></canvas>
	</view>
</template>
<script>
import EGC from "./EGC.js";
export default {
	props: {
		ecgArr: {
			type: Array,
			default: []
		},
		pageNum: {
			type: Number,
			default: 0
		}
	},
	watch: {
		ecgArr(val, oldVal) {
			if (val.length > 0) {
				this.update(val);
				// if (this.ecg) {
				// 	console.log('chufaleya')
				// 	this.ecg.grid(0, 1, val);
				// }
				// setTimeout(() => {
				// 	// #ifdef H5
				// 	this.ecg.curveChart(val, this.dpx);
				// 	// #endif
				// 	// #ifdef MP
				// 	this.ecg.grid(0, 1, val);
				// 	// #endif
				// }, 500);
			}
		}
	},
	data() {
		return {
			ecg: null,
			dpx: 2
		};
	},
	mounted() {
		let query = this.createSelectorQuery(); // 存一个 SelectorQuery 对象实例
		query
			.select("#canvas") // 在当前页面下选择 canvas 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
			.fields({
				// 获取节点的相关信息
				node: true, // 是否返回节点对应的 Node 实例
				size: true // 是否返回节点尺寸
			});

		// #ifdef H5
		query = document.getElementById("canvas");
		// #endif
		// uni.showLoading({
		// 	title: "加载数据中"
		// });
		/**
		 * 功能：实例化 ECG 类
		 * @author LOVEtwelve
		 * @date 2023-03-09
		 * @param {Object}
		 * @argument {SelectorQuery} query Canvas的DOM对象
		 * @argument {Number} bigGridX 最大号格子在X轴方向上的个数
		 * @argument {Number} bigGridY 最大号格子在Y轴方向上的个数
		 * @argument {Number} dpx H5中需除以2
		 * @argument {String} direction 心电图方向 x为横向 y为竖向
		 * @argument {Number} index 若 index 为 0 则会绘制标注图案
		 */
		let data = Array.from(
			{
				length: 3000
			},
			() => {
				return (Math.random() * 2 - 1).toFixed(4); // 保留4位小数
				return 1;
			}
		);

		this.ecg = new EGC(query, 3, 2, 2, "x", 0, []);

		// setTimeout(() => {
		// 	this.update(data);
		// }, 100);
	},
	methods: {
		update(data) {
			setTimeout(() => {
				this.ecg.grid(0, 1, data);
			}, 500);
		}
	}
};
</script>
<style></style>
